<template>
  <div class="my">
    <short-cut></short-cut>
    <nav-header></nav-header>
    <main>
      <div class="wrapper">
        <div class="aside">
          <div class="my-logo">
            <div class="my-photo">
              <img src="../../uploads/avatar_1.png" alt="头像">
            </div>
            <div class="my-name">
              张小花
            </div>
            <div class="my-vip">
              黄金会员
            </div>
          </div>
          <div class="account">
            <p>我的账户</p>
            <ul>
              <li class="act"><a href="#">个人中心</a></li>
              <li class="act"><a href="#">消息通知</a></li>
              <li class="act"><a href="#">个人信息</a></li>
              <li><a href="#">安全设置</a></li>
              <li><a href="#">地址管理</a></li>
              <li><a href="#">我的积分</a></li>
              <li><a href="#">我的足迹</a></li>
              <li><a href="#">邀请有礼</a></li>
              <li><a href="#">幸运抽奖</a></li>
            </ul>
          </div>
          <div class="deal"></div>
          <div class="favorite"></div>
          <div class="help"></div>
        </div>
        <div class="main">
          <div class="overview">
              <div class="left">
                <a href="#">
                  <img src="../../assets/vip.png" alt="会员中心">
                  <p>会员中心</p>
                </a>
                <a href="#">
                  <img src="../../assets/safe.png" alt="安全设置">
                  <p>安全设置</p>
                </a>
                <a href="#">
                  <img src="../../assets/address.png" alt="地址管理">
                  <p>地址管理</p>
                </a>
              </div>
              <div class="right">
                <a href="#"><span>6</span>
                  <p>优惠券</p>
                </a>
                <a href="#">
                  <span>70</span>
                  <p>礼品卡</p>
                </a>
                <a href="#">
                  <span>120</span>
                  <p>积分</p>
                </a>
              </div>
          </div>
        </div>
      </div>
    </main>
    <copy-right></copy-right>
  </div>
</template>

<script>
import shortCut from "@/components/common/ShortCut";
import navHeader from "@/components/common/NavHeader";
import copyRight from "@/components/common/CopyRight";

export default {
  name: "MyView",
  components: {
    shortCut,
    navHeader,
    copyRight
  }
}
</script>

<style lang="less" scoped>
.my {
  main{
    background-color: #f6f6f6;
    .wrapper{
      display: flex;
      padding-top: 29px;
      .aside{
        width: 227px;
        height: 1348px;
        margin-right: 18px;
        background-color: #fff;
        .my-logo{
          height: 230px;
          border-bottom: 1px solid #f4f4f4;
          padding-top: 47px;
          .my-photo{
            width: 85px;
            height: 85px;
            margin-left: 66px;
            margin-bottom: 14px;
            img{
              width: 100%;
            }
          }
          .my-name{
            margin-left: 83px;
            margin-bottom: 12px;
            font-size: 17px;
          }
          .my-vip{
            width: 93px;
            height: 26px;
            border-radius: 13px;
            background-color: #e76e52;
            color: #f9f9f9;
            line-height: 26px;
            text-align: center;
            font-size: 14px;
            margin-left: 62px;
          }
        }
        .account{
          border-bottom: 1px solid #f4f4f4;
          padding-top: 33px;
          p{
            margin-left: 52px;
            margin-bottom: 32px;
            font-size: 17px;
          }
          li{
            font-size: 14px;
            line-height: 14px;
            margin-bottom: 28px;
            margin-left: 53px;

          }
          .act{
            position: relative;
            a{
              color: #5eb69c;
            }
            &:before{
              position: absolute;
              top: 4px;
              left: -12px;
              display: inline-block;
              content: "";
              height: 6px;
              width: 6px;
              background-color: #5eb69c;
              border-radius: 3px;
            }
          }
        }
      }
      .main{
        flex: 1;
        //width: 999px;
        height: 1348px;
        background-color: pink;
        .overview{
          height: 132px;
          margin-bottom: 18px;
          background-color: #fff;
          padding: 20px 0;
          display: flex;
          .left {
            flex: 1;
            border-right: 1px solid #f4f4f4;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            a{
              display: block;
              text-align: center;
              img{
                width: 25px;
                height: 22px;
              }
              p{
                margin-top: 10px;
              }
            }
          }
          .right {
            flex: 1;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            a{
              text-align: center;
              span{
                font-size: 25px;
                color: #e05e30;
              }
              p{
                margin-top: 10px;
              }
            }

          }
        }
      }
    }
  }
}
</style>